<template>
  <view v-if="infoData" class="dsp-box view-page">
    <view>
      <view class="map-box">
        <image
          class="popupClose"
          @click="navBack"
          :style="{
            top: navBarHeight + 'px',
          }"
          src="https://cdn1.visiotrip.com/h5AndMini/2023-6-12/closeAiDsp.png"
        />
        <map
          ref="map"
          class="map"
          id="map"
          scale="13"
          :latitude="latitude"
          :longitude="longitude"
          :markers="markers"
          :include-points="includePoints"
          :polyline="polyline"
          @mapready="handleMapReady"
        ></map>
      </view>
    </view>
    <view class="page-content">
      <!-- <view :style="{'height': (showFixed ? '110rpx' : '0')}">
      </view> -->
      <scroll-view
        :scroll-into-view="intoView"
        scroll-y
        :scroll-with-animation="true"
        @scroll="onScroll"
        class="content-scroll"
      >
        <view class="info-view">
          <view class="info-top">
            <img
              src="https://cdn1.visiotrip.com/h5AndMini/2024-04-19/dsp-title.png"
              class="info-ai-img"
            />
            <view class="info-title">{{ overview.itineraryPlanTitle }}</view>
          </view>
          <view class="info-box">
            <view class="info-txt">
              <view>行程天数</view>
              <!-- <view class="active">{{ overview.totalDayNum }}</view> -->
              <view>
                <span class="active">{{ overview.totalDay }}</span>
                <span>天</span>
              </view>
            </view>
            <view class="line"></view>
            <view class="info-txt">
              <view>游玩景点</view>
              <view>
                <span class="active">{{ overview.attraction }}</span>
                <span>个</span>
              </view>
            </view>
            <view class="line"></view>
            <view class="info-txt">
              <view>总里程数</view>
              <view>
                <span class="active">{{ overview.totalMileage }}</span>
                <span>km</span>
              </view>
            </view>
            <view class="line"></view>
            <view class="info-txt" @click="webViewSnapshot">
              <view>下载行程</view>
              <img
                class="down"
                src="https://cdn1.visiotrip.com/h5AndMini/2023-6-12/down.png"
                alt=""
                srcset=""
              />
            </view>
          </view>
        </view>
        <view :class="{ 'fixed-tab': showFixed }" v-if="showFixed">
          <scroll-view class="day-list" scroll-x="true">
            <view
              class="day-txt"
              :class="{ active: tabIndex == item.dayNum }"
              @click="dayClick(item, index)"
              v-for="(item, index) in infoData.dayNodeList"
              :key="index"
            >
              <view class="day-flex">
                <view class="day-content">Day{{ item.dayNum }}</view>
                <img
                  v-if="tabIndex == item.dayNum"
                  class="day-icon"
                  src="../../../static/ai/icon/tab_icon.png"
                />
              </view>
            </view>
            <view
              class="day-txt"
              :class="{ active: tabIndex == infoData.dayNodeList.length + 1 }"
              @click="dayClick({ dayNum: infoData.dayNodeList.length + 1 })"
            >
              <view class="day-flex">
                <view class="day-content">小贴士</view>
                <img
                  v-if="tabIndex == infoData.dayNodeList.length + 1"
                  class="day-icon"
                  src="../../../static/ai/icon/tab_icon.png"
                />
              </view>
            </view>
          </scroll-view>
        </view>
        <view
          :id="'intoView-' + item.dayNum"
          v-for="(item, index) in infoData.dayNodeList"
          :key="index"
          class="scroll-box"
          :class="{ active: showFixed }"
        >
          <view class="day-title-box">
            <view class="day-icon" :class="'bgc' + (index % 10)"
              >D{{ item.dayNum }}</view
            >
            <view class="day-title">{{ item.dayTitle }}</view>
          </view>
          <view class="poi-swiper-box">
            <swiper
              class="swiper-box-1"
              :duration="duration"
              @change="swiperChange($event, index)"
            >
              <swiper-item
                v-for="(swiperItem, swiperIndex) in item.newItineraryCards"
                :key="swiperIndex"
                :current="swiperItem.current"
              >
                <view class="swiper-item" v-if="swiperItem.cardType === 1">
                  <view
                    class="poi-box"
                    :class="'bgc' + (index % 10)"
                    @click="openPoi(swiperItem.poiId)"
                    v-if="swiperItem.cardType === 1"
                  >
                    <img
                      class="address-icon"
                      src="https://cdn1.visiotrip.com/h5AndMini/2024-04-19/address-icon.png"
                    />
                    <view class="poi-name">{{ swiperItem.cardTitle }}</view>
                    <img
                      class="address-more"
                      src="https://cdn1.visiotrip.com/h5AndMini/2024-04-19/address-more.png"
                    />
                  </view>
                  <view
                    class="swiper-img"
                    :class="'active' + swiperItem.cardDisplayType"
                  >
                    <block
                      v-for="(imgItem, imgIndex) in swiperItem.imageList"
                      :key="imgIndex"
                    >
                      <img class="img-view" :src="imgItem"  mode="aspectFill" />
                    </block>
                  </view>
                  <view
                    class="product-box"
                    v-if="
                      swiperItem.productList.length > 0 &&
                      swiperItem.cardType === 1
                    "
                  >
                    <swiper
                      class="swiper"
                      circular
                      :vertical="true"
                      :autoplay="true"
                      :interval="3000"
                      :duration="duration"
                    >
                      <swiper-item
                        v-for="(proItem, proIndex) in swiperItem.productList"
                        :key="proIndex"
                      >
                        <view
                          class="product-box-2"
                          @click="productClick(proItem, swiperItem.poiId)"
                        >
                          <img
                            class="product-icon"
                            src="https://cdn1.visiotrip.com/h5AndMini/2024-04-19/product-icon.png"
                            alt=""
                            srcset=""
                          />
                          <text class="omit1">{{ proItem.stdName }}</text>
                        </view>
                      </swiper-item>
                    </swiper>
                  </view>

                  <view class="poi-content" v-if="swiperItem.cardType === 1 && swiperItem.cardText!=''">
                    <text class="omit2">{{ swiperItem.cardText }}</text>
                  </view>
                </view>
                <view class="tips-item">
                  <view class="tips-item-box" v-if="swiperItem.cardType === 2">
                    <view class="tips-title">{{ swiperItem.cardTitle }}</view>
                    <view class="tips-content">
                      <rich-text :nodes="swiperItem.cardText"></rich-text>
                    </view>
                    <img class="tips-img" :src="swiperItem.imageList[0]" />
                  </view>
                </view>
              </swiper-item>
            </swiper>
          </view>
          <view class="dots-box" v-if="item.newItineraryCards.length > 1">
            <view
              class="dots-item"
              :class="{ active: currentIndex === item.current }"
              v-for="(currentItem, currentIndex) in item.newItineraryCards"
              :key="currentIndex"
            ></view>
          </view>
        </view>
        <view
          :id="'intoView-' + (infoData.dayNodeList.length * 1 + 1)"
          v-if="infoData.newItineraryResponses.length > 0"
          class="scroll-box tips-scroll"
          :class="{ active: showFixed }"
        >
          <view class="tips-box">
            <swiper
              class="tips-box-swiper"
              :autoplay="false"
              :duration="duration"
              @change="tipsChange"
            >
              <swiper-item
                class="tips-item"
                v-for="(tipsItem, tipsIndex) in infoData.newItineraryResponses"
                :key="tipsIndex"
              >
                <view class="tips-item-box">
                  <view class="tips-title">{{ tipsItem.cardTitle }}</view>
                  <view class="tips-content">
                    <rich-text :nodes="tipsItem.cardText"></rich-text>
                  </view>
                  <img class="tips-img" :src="tipsItem.imageList[0]" />
                </view>
              </swiper-item>
            </swiper>
          </view>
          <view class="dots-box" v-if="infoData.newItineraryResponses.length > 1">
            <view
              class="dots-item"
              :class="{ active: currentIndex === tipsCurrent }"
              v-for="(
                currentItem, currentIndex
              ) in infoData.newItineraryResponses"
              :key="currentIndex"
            ></view>
          </view>
        </view>
        <view class="footer-box">
          <!-- yuanbin 20250506 不显示行程商品 -->
          <!-- <view class="btn-box" @click="navBackAndChat" v-if="isShowBuy">购买行程商品</view> -->
          <!-- yuanbin 20250506 single: !isShowBuy 不显示行程商品 -->
          <view class="btn-box" :class="{single: true}" @click="navToDetail"> 查看行程详细安排 </view>
        </view>
      </scroll-view>
    </view>
    
  </view>
</template>

<script>
const globalData = uni.getStorageSync("globalData");
import getTxt from "../components/getTxt/getTxt.vue";
import ImportOrder from "./importOrder.vue";
import pointData from "../utils/point";
let observer;
export default {
  props: {},
  components: {
    getTxt,
    ImportOrder,
  },
  computed: {},
  data() {
    return {
      infoData: "",
      dayNodeList: [],
      contentTxt: "",
      timer: null,
      showText: "",
      tabIndex: 1,
      intoView: "",
      summaryTimer: null,
      itineraryPlanId: "",
      overview: "",
      allDayList: [],
      markers: [],
      polyline: [],
      includePoints: [],
      longitude: "",
      latitude: "",
      windowHeight: 0,
      navBarHeight: 0,
      isBack: 0,
      isShowBuy: false, // 是否展示购买按钮
      parentSpm: {
        ref: "",
        pre: "",
      },
      shareData: {},
      tipsCurrent: 0,
      duration: 500,
      categoriesOnScreen: new Set(),
      showFixed: false,
      hosts: {
        preannouncement: 'https://pre-hybrid-app.visiotrip.com',
        production: 'https://hybrid-app.visiotrip.com'
      },
      markerColors: ['#7696FF', '#FFB052', '#FF9ACD', '#4ECAFF', '#2EE7CB', '#B3E075', '#90DD92', '#B799F5', '#E6A2F1', '#FF8E8E']
    };
  },
  async onLoad(options) {
    //获取分享参数
    let params = {
      bizId: options?.dspId,
      bizType: 6,
      destId: uni.getStorageSync("destItem").destinationId,
    };
    this.$aiRequest({
      url: "/app/share/getShareTokenByBizId",
      method: "POST",
      params,
    }).then((res) => {
      if (res.success) {
        this.shareData = res.data;
      }
    });

    this.getClineHeight();
    this.itineraryPlanId = options.dspId;
    this.isBack = options.isBack;
    this.isShowBuy = options.isShowBuy;
    await this.getInfo(this.itineraryPlanId);
    await this.getGeneral(this.itineraryPlanId);
    setTimeout(()=>{
      this.createObserver();
    },500)
    if (this.$store.$state && this.$store.$state.parentSpm) {
      this.parentSpm = this.$store.$state.parentSpm; // 获取页面来源页信息
    }
    if (this.$store.state && this.$store.state.parentSpm) {
      this.parentSpm = this.$store.state.parentSpm; // 获取页面来源页信息
    }
  },
  watch: {
    dayNodeList: {
      handler(newVal, oldVal) {},
      immediate: true,
    },
  },
  methods: {
    handleMapReady() {
      const amap = this.$refs.map._map;
      //修改地图样式
      amap?.setMapStyle("amap://styles/cff9e3640856b92fbba9d616003a0fd1");
      this.amap = amap;
    },
    getClineHeight() {
      uni.getSystemInfo({
        success: (res) => {
          this.windowHeight = res.windowHeight * 1 + globalData.navTop * 1;
        },
      });
      // #ifdef H5
      this.navBarHeight = globalData.navTop * 1 + 10;
      // #endif
      // #ifndef H5
      this.navBarHeight = globalData.navHeight * 1 - 39;
      // #endif
    },
     getInfo(id) {
      return new Promise(async(resolve,reject)=>{
        let that = this;
        let params = {
          itineraryPlanId: id,
        };
          let res = await this.$aiRequest({
          url: "/ai/aihub/trip/dayDetail",
          method: "POST",
          loading: true,
          params,
        });
        if (res.success) {
          let newArr = res.data.dayNodeList.map((item) => {
            return {
              ...item,
              dayTitle: item.poiNodeList
                .map((poiItem) => {
                  return poiItem.poiName;
                })
                .join("-"),
              current: 0,
            };
          });
          res.data.dayNodeList = newArr;
          this.infoData = res.data;
          resolve()
        }
      })
    },
    async getSummary(params) {
      let that = this;
      let res = await this.$aiRequest({
        url: "/ai/aihub/trip/summary",
        method: "POST",
        params,
      });
      if (res.success) {
        if (!res.data.isSummary) {
          setTimeout(() => {
            that.getSummary(params);
          }, 1000);
        } else {
          for (var i = 0; i < this.infoData.dayNodeList.length; i++) {
            if (this.infoData.dayNodeList[i].dayNum == res.data.dayNum) {
              this.infoData.dayNodeList[i].summary = res.data.summary;
              this.$forceUpdate();
            }
          }
        }
      }
    },
    dayClick(item, index) {
      this.showFixed = true;
      this.$nextTick(()=>{
        this.intoView = ''
        this.intoView = `intoView-${item.dayNum}`;
        console.log(this.intoView,'\\\\\\\\\\\\---')
      })
      this.tabIndex = item.dayNum;
      this.$forceUpdate()
      if (item.dayNum < this.infoData.dayNodeList.length) {
        let pointList = this.overview.poiMapGenerateList.filter(
          (e) => e.dayNum == item.dayNum
        );
        console.log(pointList, ']]]]]]]]]]==========');
        this.setMarkers(pointList);
      }
    },
    changeOpen(index) {
      this.infoData.dayNodeList[index].open =
        !this.infoData.dayNodeList[index].open;
      this.$forceUpdate();
    },
    //获取总览
     getGeneral(id) {
      return new Promise(async(resolve,reject)=>{
        let params = {
          itineraryPlanId: id,
        };
        let res = await this.$aiRequest({
          url: "/ai/aihub/trip/overview",
          method: "POST",
          params,
        });
        if (res.success) {
          this.overview = res.data;
          this.allDayList = res.data.dayNodeList;
          let pointList = this.overview.poiMapGenerateList.filter(
            (item) => item.dayNum == 1
          );
          console.log('pointList', pointList);
          this.setMarkers(pointList);
          resolve()
        }
      })
    },
    setMarkers(pointList) {
      let markers = [];
      let pointsList = [];
      let latitudeArr = [];
      let longitudeArr = [];
      this.latitude = pointList[0].latitude;
      this.longitude = pointList[0].longitude;
      pointList.forEach((p, i) => {
        latitudeArr.push(p.latitude);
        longitudeArr.push(p.longitude);
        pointsList.push({
          latitude: p.latitude,
          longitude: p.longitude,
        });
        markers.push(
          Object.assign(
            {},
            {
              id: i,
              iconPath:
                `https://cdn1.visiotrip.com/h5AndMini/2024-04-19/poiIcon-${p.dayNum}.png`,
              width: 32,
              height: 32,
              joinCluster: false, // 指定了该参数才会参与聚合
              latitude: p.latitude,
              longitude: p.longitude,
              label: {
                bgColor: "#FFFFFF",
                content: `${p.poiName}`,
                color: this.markerColors[p.dayNum-1],
                textAlign: "center",
                borderColor: "#FFFFFF",
                padding: 4,
              },
            },
            p
          )
        );
      });
      this.markers = markers;
      // if (pointList.length > 1) {
      //   this.includePoints = [
      //     {
      //       latitude: this.getMin(latitudeArr) - 0.009,
      //       longitude: this.getMin(longitudeArr) - 0.009,
      //     },
      //     {
      //       latitude: this.getMax(latitudeArr) + 0.009,
      //       longitude: this.getMax(longitudeArr) + 0.009,
      //     },
      //   ];
      // }
    },
    getMax(arr) {
      var max = arr[0];
      for (var i = 1; i < arr.length; i++) {
        var cur = arr[i];
        cur > max ? (max = cur) : null;
      }
      return max * 1;
    },
    getMin(arr) {
      var min = arr[0];

      for (var i = 1; i < arr.length; i++) {
        var cur = arr[i];
        cur < min ? (min = cur) : null;
      }
      return min * 1;
    },
    async webViewSnapshot() {
      // let contentHeight = await this.getHeigth()
      // this.heigth = await this.rpxToPx(contentHeight)
      // console.log(this.heigth, 'this.heigth---------------------')
      try {
        console.log(this.hosts[process.env.NODE_ENV])
        let host = this.hosts[process.env.NODE_ENV] 

                // let url =  encodeURIComponent(`${host}/#/ai/pages/aiDSPDetail/aiDSPDetail?dspId=${itineraryPlanId}`)

        let pageUrl = `${host}/#/ai/pages/aiDSPDetail/aiDSPDetail?dspId=${this.itineraryPlanId}`

        const url = "/screenshotTo";
        uni.showLoading({
          title: "下载中",
          mask: true,
        });
        let res = await this.$aiRequest({
          url,
          method: "POST",
          serverType: "download",
          params: {
            // dspId: this.itineraryPlanId,
            url: pageUrl
          },
        });
        console.log(res);
        // if (res.resultCode === 0) {
        console.log("成功", res);
        this.base64 = res;
        // this.base64 = "data:image/png;base64,"+ uni.arrayBufferToBase64(res)
        this.savePoster();
        // } else {
        //     uni.hideLoading();
        // }
      } catch (e) {
        uni.hideLoading();
      }
    },
    savePoster() {
      uni.getSetting({
        //获取用户的当前设置
        success: (res) => {
          if (res.authSetting["scope.writePhotosAlbum"]) {
            //验证用户是否授权可以访问相册
            this.saveImageToPhotosAlbum();
          } else {
            uni.authorize({
              //如果没有授权，向用户发起请求
              scope: "scope.writePhotosAlbum",
              success: () => {
                this.saveImageToPhotosAlbum();
              },
              fail: () => {
                uni.hideLoading();
                uni.showToast({
                  title: "请打开保存相册权限，再点击保存相册分享",
                  icon: "none",
                  duration: 3000,
                });
                setTimeout(() => {
                  uni.openSetting({
                    //调起客户端小程序设置界面,让用户开启访问相册
                    success: (res2) => {
                      // console.log(res2.authSetting)
                    },
                  });
                }, 3000);
              },
            });
          }
        },
      });
    },
    saveImageToPhotosAlbum() {
      let base64 = this.base64.replace(/^data:image\/\w+;base64,/, ""); //去掉data:image/png;base64,
      let filePath = wx.env.USER_DATA_PATH + "/ph_fit_qrcode.png";
      uni.showLoading({
        title: "下载中",
        mask: true,
      });
      uni.getFileSystemManager().writeFile({
        filePath: filePath, //创建一个临时文件名
        data: base64, //写入的文本或二进制数据
        encoding: "base64", //写入当前文件的字符编码
        success: (res) => {
          uni.saveImageToPhotosAlbum({
            filePath: filePath,
            success: function (res) {
              uni.hideLoading();
              uni.showToast({
                title: "保存相册成功",
                icon: "none",
                duration: 5000,
              });
            },
            fail: function (err) {
              uni.hideLoading();
              // console.log(err.errMsg);
            },
          });
        },
        fail: (err) => {
          uni.hideLoading();
          //console.log(err)
        },
      });
    },
    openDsp(item) {
      if (item.productQuantity > 0) {
        this.$productUrlJump(item, true);
      }
    },
    navBack() {
      // #ifdef H5
      if (!this.isBack) {
        this.$bridge.navigateDismissBack();
      } else {
        this.$navBack();
      }
      // #endif
      // #ifndef H5
      this.$navBack();
      // #endif
    },
    onScroll(e) {
      this.intoView = ''      
      if (e.detail.scrollTop > 122) {
        this.showFixed = true;
      } else {
        this.showFixed = false;
      }
    },
    swiperChange(e, index) {
      this.infoData.dayNodeList[index].current = e.detail.current;
    },
    openPoi(poiId) {
      uni.navigateTo({
        url: '/ai/pages/POIDetail/index?poiId=' + poiId
      })
    },
    productClick(item, poiId) {
      this.$productUrlJump({
        ...item,
        productId: item.stdId,
        poiId,
      }, true);
    },
    tipsChange(e) {
      this.tipsCurrent = e.detail.current;
    },
    // 回到chat页面且问出行程商品卡片
    navBackAndChat() {
      this.$navBack();
      uni.setStorageSync('isFromDspDetail', this.infoData.itineraryPlanId)
    },
    navToDetail(item) {
      uni.navigateTo({
        url: '/ai/pages/aiDSPDetail/aiDSPDetail?dspId=' + this.infoData.itineraryPlanId + '&isBack=1&isFormChat=true&isShowBuy=' + this.isShowBuy
      })
    },
    /**
     * 发送事件数据
     * @param {*} eventId 事件ID
     * @param {*} eventType 事件名
     * @param {*} spmCntSuffix 点位
     * @param {*} obj 业务参数
     */
    postEventData(eventId, eventType, spmCntSuffix, obj) {
      this.$spmFun(
        pointData,
        this.getEventObj(eventId, eventType, spmCntSuffix, obj)
      );
    },
    /**
     * 获取事件数据
     * @param {*} eventId 事件ID
     * @param {*} eventType 事件名
     * @param {*} spmCntSuffix 点位
     * @param {*} obj 业务参数
     */
    getEventObj(eventId, eventType, spmCntSuffix, obj) {
      return {
        event_id: eventId,
        event_type: eventType,
        spm_cnt: `${pointData.platform}.aiDSPDetailNew.${spmCntSuffix}`,
        spm_pre: this.parentSpm.pre,
        spm_ref: this.parentSpm.ref,
        open_time: new Date().getTime(),
        args: {
          ...this.destItem,
        },
      };
    },
    leftIndexOfId(id) {
      for (let i = 0; i < this.infoData.dayNodeList.length; i++) {
        const dayNum = this.infoData.dayNodeList[i].dayNum * 1;
        if (dayNum == id) {
          return dayNum;
        }
      }
    },
    createObserver() {
      console.log("添加监控");
      if (observer) {
        observer.disconnect();
        observer = undefined;
      }
      observer = uni
        .createIntersectionObserver(this, {
          observeAll: true,
          thresholds: [0, 0.001],
        })
        .relativeTo(".page-content", { top: -180 })
        .observe(".scroll-box", (res) => {
          const { intersectionRatio, id } = res;
          const categoryTabIndex = id.split("-")[1] * 1
          // const categoryTabIndex = this.leftIndexOfId(id.split("-")[1] * 1);
          if (intersectionRatio > 0) {
            this.categoriesOnScreen.add(categoryTabIndex);
          } else {
            this.categoriesOnScreen.delete(categoryTabIndex);
          }
          // categoriesOnScreen保存的是右边显示的所有类目的下标，其中最小的下标就应该是左边选中的下标
          let min = Math.min(...this.categoriesOnScreen);
          console.log("min", min, res,"==========",  this.categoriesOnScreen);
          if (!isFinite(min)) {
            min = this.infoData.dayNodeList.length + 1;
            this.tabIndex = min;
            return;
          } else {
            this.tabIndex = min;
            if(this.tabIndex > this.infoData.dayNodeList.length) return
            let pointList = this.overview.poiMapGenerateList.filter(
              (e) => e.dayNum == min
            );
            this.setMarkers(pointList);
          }
        });
    },
  },
  onShow() {
    //	#ifdef H5
    const dsbridges = require("@/utils/dsbridge.js");
    let getAppSpmParam = JSON.parse(dsbridges.getAppSpmParam());
    if (getCurrentPages().length == 1) {
      this.parentSpm = {
        ref: getAppSpmParam.events[0].spm_cnt, //上级页面点击位置
        pre: getAppSpmParam.events[0].spm_ref, //上上级点击位置
      };
    }
    let spmData = this.getEventObj("2003", "页面离开", "0.0");
    this.$store.commit("SET_POINT_DATA", pointData);
    this.$store.commit("SET_SPM_DATA", spmData);
    //	#endif
    this.postEventData("2002", "页面进入", "0.0");
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    this.postEventData("2003", "页面离开", "0.0");
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    this.postEventData("2003", "页面离开", "0.0");
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function (res) {
    return this.$shareFun(
      this.shareData,
      `${this.infoData.itineraryPlanTitle}`
    );
  },
};
</script>

<style lang="scss" scoped>
.dsp-box {
  background: #f6f8ff;
}
// 行程弹框详情开始
.detail-box {
  width: 720rpx;
  margin: 0 auto;
}
.page-content{
  margin-top: -124rpx;
  background: #f6f8ff;
  border-radius: 48rpx 48rpx 0rpx 0rpx;
  overflow: hidden;
}
.info-view {
  width: 100%;
  height: 244rpx;
  background-image: url('https://cdn1.visiotrip.com/h5AndMini/2024-04-19/dsp-title-back.png');
  background-repeat: no-repeat;
  background-size: cover;
  .info-top {
    display: flex;
    align-items: center;
    padding: 38rpx 32rpx 8rpx 32rpx;
    border-radius: 48rpx 48rpx 0rpx 0rpx;
    .info-ai-img {
      margin-right: 31rpx;
      width: 134rpx;
      height: 34rpx;
    }
    .info-title {
      font-weight: 600;
      font-size: 32rpx;
      color: #131328;
      line-height: 32rpx;
    }
  }
  .info-box {
    width: 690rpx;
    height: 107rpx;
    background: #ffffff;
    box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(181, 181, 210, 0.1);
    border-radius: 26rpx;
    margin: 30rpx auto 32rpx;
    display: flex;
    align-items: center;
    justify-content: space-evenly;

    .line {
      width: 1rpx;
      height: 57rpx;
      // border: 1rpx solid #BEBEBE;
      background: #e4e4f4;
    }

    .info-txt {
      flex: 1;
      text-align: center;

      view {
        color: $sl-color-light-grey;
        font-size: 24rpx;
      }

      .down {
        width: 28rpx;
        height: 28rpx;
      }

      view span.active {
        font-size: 36rpx;
        color: $sl-color-dark-grey;
        font-weight: 600;
        margin-right: 4rpx;
      }
    }
  }
}

.day-list {
  white-space: nowrap;
  width: 100%;
  height: 104rpx;
  background: #f6f8ff;
  border-radius: 48rpx 48rpx 0 0;
  .day-txt {
    display: inline-block;
    color: $sl-color-grey;
    font-size: 28rpx;
    width: 150rpx;
    text-align: center;
    height: 104rpx;
    .day-flex {
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
      height: 104rpx;
      .day-icon {
        width: 46rpx;
        height: 14rpx;
        position: absolute;
        left: 50%;
        margin-left: -23rpx;
        bottom: 12rpx;
      }
    }
  }

  .day-txt.active {
    font-size: 36rpx;
    color: $sl-color-black;
    font-weight: 600;
  }
}

.map-box {
  position: relative;
  width: 100%;
  height: 600rpx;

  .popupClose {
    position: fixed;
    width: 48rpx;
    height: 48rpx;
    left: 30rpx;
    z-index: 11;
  }
  .popupClose-H5 {
    position: fixed;
    width: 48rpx;
    height: 48rpx;
    right: 30rpx;
    z-index: 11;
  }
  .map {
    width: 100%;
    height: 35vh;
  }
}
.content-scroll {
  height: 66vh;
  border-radius: 48rpx 48rpx 0 0;
  &.active {
    // padding-top: 154rpx;
  }
}
// 行程弹框详情结束
::v-deep .uni-page-wrapper {
  height: auto;
}
.day-title-box {
  width: 690rpx;
  min-height: 124rpx;
  background: #ffffff;
  box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(181, 181, 210, 0.1);
  border-radius: 16rpx;
  margin: 0 auto;
  display: flex;
  align-items: center;
  padding: 22rpx 0;
  .day-icon {
    width: 56rpx;
    height: 56rpx;
    background: #7696ff;
    box-shadow: 0rpx 2rpx 8rpx 3rpx rgba(118, 150, 255, 0.3);
    border: 2rpx solid #ffffff;
    border-radius: 50%;
    margin: 0 22rpx 0 22rpx;
    text-align: center;
    line-height: 56rpx;
    color: $sl-color-btn-txt;
    font-weight: bold;
  }
  .day-title {
    margin: 0 22rpx 0 0;
    font-size: 28rpx;
    color: $sl-color-black;
    flex: 1;
    font-weight: 600;
    line-height: 42rpx;
  }
}
.swiper-box-1 {
  width: 690rpx;
  height: 920rpx;
  margin: 20rpx auto 0 auto;
  .swiper-item {
    background: #ffffff;
    height: 920rpx;
    position: relative;
    border-radius: 20rpx;
    .swiper-img {
      width: 100%;
      height: 920rpx;
      border-radius: 20rpx;
      overflow: hidden;
      &.active1 {
        .img-view {
          width: 100%;
          height: 100%;
        }
      }
      &.active2 {
        .img-view {
          width: 100%;
          height: 50%;
        }
      }
      &.active3 {
        display: flex;
        flex-wrap: wrap;
        .img-view {
          width: 50%;
          height: 50%;
        }
      }
    }
    .poi-box {
      position: absolute;
      top: 40rpx;
      left: 0;
      display: flex;
      align-items: center;
      height: 70rpx;
      background: linear-gradient(270deg, #aec7ff 0%, #7696ff 100%);
      border-radius: 0rpx 35rpx 35rpx 0rpx;
      .poi-name {
        color: #ffffff;
        font-size: 32rpx;
        font-weight: 800;
        max-width: 490rpx; /* 定义容器宽度 */
        white-space: nowrap; /* 确保文本在一行内显示 */
        overflow: hidden; /* 超出容器部分的文本隐藏 */
        text-overflow: ellipsis; /* 使用省略号表示被截断的文本 */

      }
      .address-icon {
        width: 26rpx;
        height: 32rpx;
        margin: 0 8rpx 0 20rpx;
      }
      .address-more {
        width: 28rpx;
        height: 28rpx;
        margin: 0 14rpx 0 6rpx;
      }
    }
    .poi-content {
      width: 629rpx;
      background: rgba(131, 131, 173, 0.06);
      border-radius: 16rpx;
      backdrop-filter: blur(26px);
      position: absolute;
      bottom: 0;
      left: 0;
      border-radius: 20rpx;
      font-size: 28rpx;
      color: #ffffff;
      padding: 22rpx 30rpx 22rpx 30rpx;
      line-height: 45rpx;
    }
    .product-box {
      position: absolute;
      bottom: 156rpx;
      left: 32rpx;
      width: 358rpx;
      height: 58rpx;
      .swiper {
        width: 358rpx;
        min-height: 58rpx;
      }
    }
    .product-box-2 {
      display: flex;
      align-items: center;
      width: 358rpx;
      min-height: 58rpx;
      border-radius: 16rpx;
      background: rgba(32, 32, 40, 0.6);
      .product-icon {
        width: 38rpx;
        height: 38rpx;
        margin: 0 10rpx;
      }
      .omit1 {
        color: #ffffff;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3; /* 限制显示的行数 */;
        overflow: hidden;
        word-break: break-all;  /* break-all(允许在单词内换行。) */
        text-overflow: ellipsis;  /* 超出部分省略号 */
        flex: 1;
      }
    }
  }
}

.poi-swiper-box {
  margin-top: 32rpx;
}
.dots-box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20rpx;
  margin: 20rpx 0;
  .dots-item {
    width: 10rpx;
    height: 10rpx;
    background: rgba(19, 19, 40, 0.2);
    margin: 0 5rpx;
    border-radius: 50%;
    &.active {
      width: 16rpx;
      background: #131328;
      border-radius: 5rpx;
      border: 1rpx solid #bef100;
    }
  }
}

.tips-box {
  width: 690rpx;
  margin: 0 auto;
  border-radius: 26rpx;
  overflow: hidden;
  .tips-box-swiper {
    width: 690rpx;
    height: 920rpx;
  }
}
.tips-item {
  width: 690rpx;
  height: 920rpx;
  position: relative;
  .tips-item-box {
    width: 690rpx;
    height: 920rpx;
    position: relative;
    .tips-title {
      height: 45rpx;
      width: 482rpx;
      text-align: center;
      font-weight: bold;
      margin-left: -241rpx;
      position: absolute;
      z-index: 2;
      left: 50%;
      top: 104rpx;
      color: #131328;
      font-size: 32rpx;
    }
    .tips-content {
      width: 482rpx;
      height: 654rpx;
      margin-left: -241rpx;
      position: absolute;
      z-index: 2;
      left: 50%;
      top: 174rpx;
      color: #767697;
      font-size: 24rpx;
      line-height: 40rpx;
    }
    .tips-img {
      width: 690rpx;
      height: 920rpx;
      position: absolute;
      left: 0;
      top: 0;
    }
  }
}
.bgc0 {
  background: linear-gradient(270deg, #aec7ff 0%, #7696ff 100%) !important;
}
.bgc1 {
  background: linear-gradient(270deg, #ffce93 0%, #ff9517 100%) !important;
}
.bgc2 {
  background: linear-gradient(270deg, #ffbfdf 0%, #ff9acd 100%) !important;
}
.bgc3 {
  background: linear-gradient(270deg, #89dcff 0%, #29bfff 100%) !important;
}
.bgc4 {
  background: linear-gradient(270deg, #a3e5db 0%, #00dab9 100%) !important;
}
.bgc5 {
  background: linear-gradient(270deg, #bedd95 0%, #9ad44b 100%) !important;
}
.bgc6 {
  background: linear-gradient(270deg, #afddb0 0%, #70d573 100%) !important;
}
.bgc7 {
  background: linear-gradient(270deg, #ccb3fe 0%, #a983f8 100%) !important;
}
.bgc8 {
  background: linear-gradient(270deg, #ebbef2 0%, #e586f4 100%) !important;
}
.bgc9 {
  background: linear-gradient(270deg, #fdc1c1 0%, #ff6c6c 100%) !important;
}
.footer-box {
  width: calc(100% - 40rpx);
  height: calc(80rpx + constant(safe-area-inset-bottom));
  height: calc(80rpx + env(safe-area-inset-bottom));
  display: flex;
  margin: 0 20rpx;
  padding-top: 32rpx;
  .btn-box {
    width: 344rpx;
    // flex: 1;
    height: 88rpx;
    text-align: center;
    line-height: 88rpx;
    color: #fff;
    font-size: 32rpx;
    margin: 0 auto 80rpx;
    background: #7696ff;
    border-radius: 44rpx;
    &.single {
      flex: 1;
    }
  }
}
.fixed-tab {
  width: 100%;
  position: fixed;
  top: 476rpx;
  z-index: 111;
  border-radius: 48rpx 48rpx 0 0;
}
.scroll-box{
  // &.active{
  //   // padding-top: 154rpx;
  // }
}
</style>
